<template>
    <div class="chart-container">
      <h2 class="chart-title">鞋子可视化展示</h2>
      <a-button type="primary" @click="handleGoHome" style="margin-right: 16px">主界面</a-button>
      <div class="chart-row">
        <div ref="barChart1" class="chart"></div>
        <div ref="barChart2" class="chart"></div>
      </div>
      <div class="chart-row-mid">
        <div ref="lineChart" class="chart"></div>
        <!-- <div ref="pieChart" class="chart"></div> -->
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';
  export default {
  data() {
    return {
      barChart1Instance: null,
      barChart2Instance: null,
      lineChartInstance: null,
      pieChartInstance: null
    };
  },
  mounted() {
    this.renderCharts();
  },
  methods: {
    renderCharts() {
      this.barChart1Instance = echarts.init(this.$refs.barChart1);
      this.wordCloudChartInstance = echarts.init(this.$refs.barChart2);
      this.lineChartInstance = echarts.init(this.$refs.lineChart);
    //   this.pieChartInstance = echarts.init(this.$refs.pieChart);

      // 模拟数据
      const count = [436, 740, 333, 242, 134, 346];
      const shopFreq = [
        { name: '夕玥运动', value: 104 },
        { name: '斯凯奇骏拓', value: 41 },
        { name: '米娜鞋品', value: 40 },
        { name: '花花公子维图', value: 30 },
        { name: '牛戈乌', value: 28 },
        { name: '瞬堪布', value: 27 },
        { name: 'Dickies鞋靴', value: 24 },
        { name: '海澜之家', value: 23 },
        { name: '钦落刻', value: 22 },
        { name: 'INTERSPORT', value: 21 },
        { name: '啄木鸟全纽', value: 21 },
        { name: '领衔运动', value: 21 },
        { name: '贵作鞋靴', value: 20 },
        { name: '公牛世家鞋靴', value: 20 },
        { name: '奥康卓女', value: 20 },
        { name: '回力茂竹鑫', value: 18 },
        { name: 'ECCO爱步男鞋', value: 18 },
        { name: '银泰百货运动', value: 18 },
        { name: '卡帝乐鳄鱼维图', value: 17 },
        { name: '奥康大梦', value: 17 },
        { name: '国际卡通童鞋', value: 16 },
        { name: '西域骆驼咛兹', value: 16 },
        { name: '回力恩起', value: 15 },
        { name: '回力威雅梵', value: 15 },
        { name: '全纽鞋靴', value: 15 }
      ];

      const barOptions1 = {
        title: {
          show: true,
          text: '价格区间分布',
          textAlign: 'center',
          left: '50%',
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['0-100', '100-200', '200-300', '300-400', '400-500', '500以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: count.map(value => ({
            value: value,
            itemStyle: {
              color: 'rgb(51, 102, 204)' 
            }
          })),
          type: 'bar'
        }],
        grid: {
          containLabel: true,
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      };
      this.barChart1Instance.setOption(barOptions1);
      const wordCloudOptions = {
        title: {
          show: true,
          text: '品牌频率词云图',
          textAlign: 'center', 
          left: '50%', // 标题水平居中
          top: 'bottom' 
        },
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: shopFreq
      }]
    };
    this.wordCloudChartInstance.setOption(wordCloudOptions);

      // 绘制折线图
      const lineOptions = {
        title: {
          show: true,
          text: '店铺评分趋势图',
          textAlign: 'center', 
          left: '50%', // 标题水平居中
          top: 'bottom' 
        },
        xAxis: {
          type: 'category',
          data: ['3.0', '3.5', '4.0', '4.1', '4.2', '4.3', '4.4',
        '4.5', '4.6', '4.7', '4.8', '4.9']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [2,29,38,27,19,143,53,192,173,333,347,379],
          type: 'line'
        }],
        tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}' 
        }
      };
      this.lineChartInstance.setOption(lineOptions);

    },
    handleGoHome() {
      this.$router.push('/home');
  }
  }
  
};

  </script>
  
  <style>
  .chart-container {
    width: 90vw;
	height: 100vh;
    background-image: url('/assets/image/filebg.jpg'); 
    background-size: cover;
    padding: 20px;
  }
  
  .chart-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .chart-row-mid {
  display: flex;
  justify-content: center;
}
  
  .chart {
  width: 48%;
  height: 300px;
  background-color: white;
}
.el-select__placeholder {
  width: 200px;
  margin: 0 auto;
}

</style>

